<template>
    <div class="mainBox">
        <el-button type="text" style="float: left;margin-left: 15px;" @click="goToNewConsign">
			<i class="iconfont icon-jiahao" style="font-size: 20px;color:#71be59"></i>
			<span style="margin-left: 5px;white-space: nowrap;width: 50px;color: #000000;" >新增</span>
		</el-button>
		<el-button type="text" style="float: left;margin-left: 15px;" @click="deleteConsign">
					<i class="iconfont icon-shanchu" style="font-size: 20px;color:#fd034f"></i>
					<span style="margin-left: 5px;white-space: nowrap;width: 50px;color: #000000;">删除</span>
		</el-button>
        <el-col :span="2" :offset="11">
         <el-select v-model="value" placeholder="请选择" @change="shaiXuan">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-col>
		<el-input placeholder="请输入关键字搜索" v-model="searchvalue" style="float: right;width: 30%;" @keyup.enter.native = 'search'>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
		</el-input>   
        <el-table :data="weiPeiList" tooltip-effect="dark" style="width: 100%;height: 90%;" stripe @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="ID" type="index" width="55" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="name" label="标题" align="center" valign="middle" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="time" label="发布时间" width="180" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state=='已发布'">{{scope.row.publishTime}}</span>
                        <span v-else>{{scope.row.state}}</span>
                    </template>
				</el-table-column>
				<el-table-column  label="报名量" width="100" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.count+'/'+scope.row.requirePopulation }}</span>
                    </template>
				</el-table-column>
				<el-table-column prop="work" label="操作" width="280" align="center" valign="middle" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-button size="mini" type="primary" style="background-color: #409EFF;" @click="goToDetail(scope.$index, scope.row)">详情</el-button>
						<el-button v-if="scope.row.state=='已下架'" size="mini" type="info" disabled>下架</el-button>
                        <el-button v-else size="mini" type="primary" style="background-color: #409EFF;" @click="handleUpdateConsign(scope.$index, scope.row)">下架</el-button>
					</template>
				</el-table-column>
			</el-table>    

            <el-pagination v-show="all!=1" background :page-size="pageSize" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
			 :page-count="all" class="fenYe">
			</el-pagination> 
    </div>
</template>

<script>
export default {
    data(){
        return{
            options: [{
                value: '全部',
                label: '全部'
                }, {
                value: '已发布',
                label: '已发布'
                }, {
                value: '待审核',
                label: '待审核'
                },{
                    value:'已下架',
                    label:'已下架'
            }],
            value: '全部',
            pageSize:10,
            pageNo: 1,
			all: 1,
            weiPeiList:[],
            multipleSelection: [],
            searchvalue: '',
            deleteList:[],
        }
    },
    mounted(){
        this.getConsignGeneral();
    },
    methods:{
        search(){
            this.pageNo=1;
            this.getConsignGeneral();
        },
        shaiXuan(){
            this.pageNo=1;
            this.getConsignGeneral();
        },
        deleteConsign(){
            console.log('这里是选中的：');
            console.log(this.multipleSelection);
            var i=0;
            for(i=0;i<this.multipleSelection.length;i++){
                this.deleteList.push(this.multipleSelection[i].id)
            }
            console.log(this.deleteList);
            var URL='http://47.101.180.43:8075/consign/deleteConsign'
                        this.$ajax({
                        method:'delete',
                        url:URL,
                        data:this.deleteList,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data);
                            this.$notify({
                                message: response.data.data,
                                type: 'success'
                            });
                            this.getConsignGeneral();
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('委培删除失败');
                    });
        },
        goToNewConsign(){
            this.$router.push({
                path:'/companyPage/home/newConsign',
            })
        },
        getConsignGeneral(){
            var state='';
            if(this.value=='全部'){
                state='';
                console.log('筛选'+state);
            }else{
                state=this.value;
                console.log('筛选'+state);
            }
            var URL='http://47.101.180.43:8075/consign/consignGeneral'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            pageNo:this.pageNo,
                            pageSize:this.pageSize,
                            state:state,
                            word:this.searchvalue,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this.all=response.data.data.pages;
                            this.weiPeiList=response.data.data.info;
                            // console.log(this.weiPeiList);
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                            this.weiPeiList=[];
                        }
                    }).catch(error => {
                    console.log('委培获取失败');
                    });
        },
        goToDetail(index, row){
            console.log('这里是索引：'+index);
            console.log('这里是委培ID：'+this.weiPeiList[index].id);
            this.$router.push({
                path:'/companyPage/home/consignDetail',
                query:{
                    consignId:this.weiPeiList[index].id
                }
            })
        },
        handleUpdateConsign(index, row) {
            console.log(index, row);
            console.log(this.weiPeiList[index].id);
            var URL='http://47.101.180.43:8075/consign/updateConsign'
                        this.$ajax({
                        method:'put',
                        url:URL,
                        params:{
                            id:this.weiPeiList[index].id
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this.$notify({
                                message:response.data.data
                            });
                            this.getConsignGeneral();
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('下架失败');
                    });
        },
        handleCurrentChange(val) {
				this.pageNo = val;
				this.getConsignGeneral();
				console.log(`当前页: ${val}`);
			},
        handleSelectionChange(val) {
			this.multipleSelection = val;
		},
    },
}
</script>

<style>
.fenYe{
    position: absolute;
    bottom:30px;
    right:10px;
}
.mainBox{
    position: relative;
    min-height: 700px;
	background-color: #FFFFFF;
	margin-top: 20px;
	padding: 20px;
	border-radius: 10px;
}
</style>